<template>
   <div class="syslog">
       <h4>统计订单>查看订单列表</h4>
       <div class="filter-box" style="padding: 30px;
                background: #fff;
                border: 1px solid #ddd;border-bottom:0;border-radius:5px 5px 0 0">
                    <div style="margin-bottom:14px;">
                            <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                                规格：
                                <el-input clearable
                                    placeholder="请输入规格"
                                    v-model="guige" class="filter-input"
                                     @keyup.enter.native="search()">
                                </el-input>
                            </div>
                            <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                                订单编号：
                                <el-input clearable
                                    placeholder="请输入订单编号"
                                    v-model="orderId" class="filter-input"
                                     @keyup.enter.native="search()">
                                </el-input>
                            </div>
                            <el-button type="primary" @click="search()">搜索</el-button>
                    </div>           
       </div>
       <div class="container" style="border-radius: 0 0 5px 5px;padding:30px 0 10px 0;">
            <div style="padding: 0 30px;">
             <el-table v-loading="loading" :data="data" border style="width: 100%;" ref="multipleTable" >
                 <el-table-column  type="index"  width="60" label="序号" align="center" :index="indexMethod"></el-table-column>
                 <el-table-column prop="date" label="时间" width="120" align="center"></el-table-column>
                 <el-table-column prop="orderId" label="订单编号" width="180" align="center" >
                </el-table-column>
                <el-table-column prop="goodsSize" label="规格" width="150" align="center"></el-table-column>
                <el-table-column prop="totalWeight" label="总斤数（斤）" align="center" width="150">
                </el-table-column>
                <el-table-column prop="receivableMoney" label="订单应收入" align="center"  width="150">
                </el-table-column>
                <el-table-column prop="orderRefund" label="订单总退款" align="center" width="150">
                </el-table-column>
                <el-table-column prop="orderRealIncome" label="订单实际收入" align="center" width="150">
                </el-table-column>
             </el-table> 
            </div>
             <div class="pagination" style="padding:20px 30px 10px 20px;border-top:1px solid #ddd;">
                <el-pagination  background  layout="prev, pager, next" 
                                :total="total" 
                                @current-change="getPageNum"
                                style="text-align:left;">
                </el-pagination>
            </div>
      </div>
  </div>  
</template>

<script>
import { orderCounte_datail } from '@/request/api'
export default {
    data(){
        return {
           loading:true,
           data: [],
        //    orderList:{
            linkTel:'',    // 供应商的手机号
            guige:'',//规格
            orderNum:'',//总订单数（笔）
            totalWeight:'',//总斤数（斤）
            receivableMoney:'',//订单应收入
            orderRefund:'',//订单总退款
            orderRealIncome:'',//订单实际收入
            pageNum:1,
            pageSize:10,
            total:0,//总数据
            // }
            orderList:'',
            orderId:'',
            
         }
    },
    created(){
        this.get_tradeList();
    },
    methods:{
      indexMethod(index) {
        return   this.pageSize*(this.pageNum-1) + 1 + index;
      },
      getPageNum(e){
        //   当前页 
         this.pageNum = e;
         this.get_tradeList();
      },
      formatter(row, column){
         return row.address
      },
      handleEdit(id){
          this.$router.push({
              path:`/orderCount/orderWatch/${id}`
          }) 
      },
      search(){
          this.get_tradeList();
      },
      get_tradeList(){
          orderCounte_datail({
             farmerId:this.$route.params.id,
             date:this.$route.params.date,//日期
             goodsSize:this.guige,//规格
             orderId:this.orderId,//订单标号
             pageNum:this.pageNum,
             pageSize:this.pageSize,
          }).then(res => {
              this.total = res.total;
              this.data = res.rows;
              this.loading = false;
          })
      }
    }
 }
</script>
<style  scoped>
.syslog {
        width:100%;
        height: 100%;
}
.syslog h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}

.handle-box {
  margin-bottom: 20px;
}



.filter-input {
  width: 200px;
  display: inline-block;
}
.blue{
    color:blue;
}
</style>